import React from 'react'
import PropTypes from 'prop-types'
import {
    Form,
    Input,
    TreeSelect,
    Radio,
    Modal,
} from 'antd'

const FormItem = Form.Item

const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
}

const modal = ({
                   form: {
                       getFieldDecorator,
                       validateFields,
                       getFieldsValue,
                       getFieldValue,
                   },
                   treeData,
                   ...modalProps
               }) => {

    console.log('selectTree Data is: ', treeData);

    return (
        <Modal
            title="直接点保存, 因为数据在index.js里面变量是created, 保存完看'父级菜单'里面的数据压根没变, 但是外面table中变了"
            okText="保存"
            {...modalProps}
            maskClosable={false}
        >
            <Form layout="horizontal">
                <FormItem label="名称" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('name', {})(<Input />)}
                </FormItem>
                <FormItem
                    label="父级菜单"
                    {...formItemLayout}
                >
                    {getFieldDecorator('pid', {})(
                        <TreeSelect
                            showSearch
                            allowClear
                            style={{width: 200}}
                            dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
                            treeData={treeData}
                            placeholder="请所属的父级菜单"
                            treeDefaultExpandAll
                        />
                    )}
                </FormItem>
                <FormItem
                    label="类型"
                    {...formItemLayout}
                >
                    {getFieldDecorator('type', {
                        initialValue: '1'
                    })(
                        <Radio.Group>
                            <Radio.Button value="1">菜单</Radio.Button>
                            <Radio.Button value="2">按钮</Radio.Button>
                        </Radio.Group>
                    )}
                </FormItem>
                <FormItem label="图标" hasFeedback {...formItemLayout}>
                    {getFieldDecorator('icon')(<Input />)}
                </FormItem>
            </Form>
        </Modal>
    )
}


export default Form.create()(modal)
